/**
 * Created by tianjie on 2017/11/15.
 */

var online = {
    URL : {
        getLoginNumber:function(){
            return "/admin/statistics/getLoginNumber";      //获取登录人数
        }
    },
    init:function(){
        common.initDateTimeRange();//  初始化时间控件
        var day = getNowFormatDate();
        $('#dateTimeRange').val(day+" 至 "+day);
        getData();  //请求后台数据 组装折线图
    }
};

/**
 * 清除时间
 */
function begin_end_time_clear() {
    $('#dateTimeRange').val('');
    $('#beginTime').val('');
    $('#endTime').val('');
}

/********************** 以下为折线图 *******************************/

var myChart = echarts.init(document.getElementById('main'),'macarons');
var colors = ['#5793f3', '#d14a61', '#675bba'];

var initChart = function(data){
    Highcharts.chart('main', {
        chart: {
            type: 'line'
        },
        title: {
            text:null
        },
        tooltip: {
            shared: true,
            crosshairs: [{
                width: 1,
                dashStyle: 'Dot',
                color: 'green'
            }]
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'center',
            verticalAlign: 'top'
        },
        xAxis: [
            {
                categories: data.xAxis,
                tickInterval: 3,
                labels: {
                    format: '{value}',
                    style: {
                        color:'#008ACD'
                    }
                }
            }
        ],
        yAxis: {
            title: {
                text:null
            },
            labels: {
                style: {
                    color:'#008ACD'
                }
            }
        },
        plotOptions: {
            spline: {
                marker: {
                    enabled:true,
                    radius: 2,
                    lineColor: '#D14A61',
                    fillColor:'#fff',
                    symbol: 'circle', //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，
                    lineWidth: 1
                }
            },
            line: {
                dataLabels: {
                    enabled: true          // 开启数据标签
                },
                enableMouseTracking: true // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            }
        },
        series: [{
            name: '注册人数',
            type: 'spline',
            data:data.sumData,
            color: '#8085E9',
            tooltip: {
                valueSuffix: '个'
            }
        }]
    });
};

function initLoginTable(data) {
    $("#demo-table").html("");
    var num = data.xAxis.length;
    var str = "<thead><tr><th>#</th><th>注册日期</th><th>注册人数</th></tr></tr></thead><tbody>";
    if(num > 0){
        $.each(data.xAxis, function (i, n) {
            str += "<tr><td>"+(i+1)+"</td><td>"+data.xAxis[num-1-i]+"</td><td>"+data.sumData[num-1-i]+"</td></tr>";
        });
    }else {
        str += "<tr><td colspan='3'>没有找到匹配的记录</td></tr>"
    }
    $("#demo-table").append(str);
}

//请求后台数据
var getData = function(){
    var beginTime = $('#beginTime').val();
    var endTime = $('#endTime').val();
    var time = $('#dateTimeRange').val();
    /** 不知道怎么回事 首次进入页面点击今日时会出现beginTime endTime为空的情况 在这里特殊处理下 ***/
    if(beginTime==""||endTime==""){
        //2017-05-26 至 2017-05-26
        beginTime = time.substring(0,10);
        endTime = time.substring(13);
    }
    myChart.showLoading();
    $.ajax({
        url : online.URL.getLoginNumber(),
        type:'POST',
        async:true,    //或false,是否异步
        data:{
            beginTime:beginTime,endTime:endTime
        },
        timeout:5000,    //超时时间
        dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
        success:function(data,textStatus,jqXHR){
            myChart.hideLoading();
            if(data.code!=0){
                layer.msg(data.msg);
                return false;
            }
            console.log(data);
            initChart(data.data);
            initLoginTable(data.data);
        },
        error:function(xhr,textStatus){
            myChart.hideLoading();
            console.log('错误')
            console.log(xhr)
            console.log(textStatus)
        }
    })

};

window.onresize = function () {
    myChart.resize();
};